<template>
  <div class="dialogue-optimizer">
    <div class="optimizer-header">
      <h2>台词优化</h2>
      <el-button type="primary" @click="optimizeDialogue">优化台词</el-button>
    </div>
    
    <div class="optimizer-content">
      <div class="dialogue-input">
        <el-input
          v-model="dialogueInput"
          type="textarea"
          :rows="6"
          placeholder="请输入需要优化的台词..."
        />
        <div class="dialogue-options">
          <el-select v-model="dialogueStyle" placeholder="台词风格" class="style-select">
            <el-option label="正式" value="formal" />
            <el-option label="口语" value="casual" />
            <el-option label="幽默" value="humorous" />
            <el-option label="诗意" value="poetic" />
          </el-select>
        </div>
      </div>
      
      <div class="dialogue-output">
        <div class="output-header">
          <h3>优化结果</h3>
        </div>
        <div class="output-content">
          <div v-if="dialogueOutput" class="optimized-dialogue">
            {{ dialogueOutput }}
          </div>
          <div v-else class="output-placeholder">
            点击"优化台词"按钮开始优化
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['apply-dialogue'])

const dialogueInput = ref('')
const dialogueStyle = ref('')
const dialogueOutput = ref('')

const optimizeDialogue = () => {
  if (!dialogueInput.value) {
    ElMessage.warning('请输入需要优化的台词')
    return
  }
  // 模拟 AI 优化
  dialogueOutput.value = '优化后的台词：\n\n' +
    '原台词：' + dialogueInput.value + '\n\n' +
    '优化后：' + dialogueInput.value.replace(/。/g, '！')
}

const applyDialogue = () => {
  if (!dialogueOutput.value) {
    ElMessage.warning('请先优化台词')
    return
  }
  emit('apply-dialogue', dialogueOutput.value)
  ElMessage.success('已应用优化后的台词')
}
</script>

<style scoped>
.dialogue-optimizer {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.optimizer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
}

.optimizer-content {
  flex: 1;
  display: flex;
  gap: 24px;
}

.dialogue-input {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.dialogue-options {
  margin-top: 16px;
}

.dialogue-output {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.output-header {
  margin-bottom: 16px;
}

.output-content {
  flex: 1;
  background: #f5f7fa;
  border-radius: 4px;
  padding: 16px;
  overflow-y: auto;
}
</style> 